<script lang="ts"  setup>
import {computed, onMounted, reactive, ref} from 'vue'
import {getHomeWorks,setHomeWorks} from '@/api/getData.js'
import {useStore} from "vuex";

interface User {
  class: string
  title: string
  content: string
  date: string
  subject: string; // 新增科目属性
}

const search = ref('')
const homeworks = ref([] as User[])
const selectedSubject = ref('');
const filterTableData = computed(() =>
    homeworks.value.filter(
        (data) =>
            // !search.value ||
            // data.title.toLowerCase().includes(search.value.toLowerCase())
            (!selectedSubject.value || data.subject === selectedSubject.value) &&
            (!search.value ||
                data.title.toLowerCase().includes(search.value.toLowerCase()))
    )
)
const handleCommit = (index: number, row: User) => {
  console.log(index, row)
  alert('作业发布成功');
  handleDelete(index);
  commitHomework(row); // 提交作业数据到 Vuex
}
const handleDelete = (index: number) => {
  homeworks.value.splice(index, 1);
}
// vuex
const store = useStore(); // 获取 Vuex 的 store 实例
const commitHomework = (homework: User) => {
  store.commit('getWork/addHomework', homework); // 提交作业到 Vuex 的 mutation
};


//获取作业
const getHomework = async () => {
  try {
    const homeworkIds = Array.from({ length: 10 }, (_, index) => index + 1);
    const requests = homeworkIds.map(homeworkId => getHomeWorks(homeworkId));
    const responses = await Promise.all(requests);
    console.log('123456789',responses)
    homeworks.value = responses.map(response => response.datas);
    console.log('homeworks',homeworks.value)
  } catch (error) {
    console.error('Error fetching homeworks:', error);
  }
};
onMounted(()=>{
  getHomework();
})

//添加作业
// 调用 setHomeWorks 函数，并传入作业数据
const homeworkData = {
  homeworkId: 2,
  teacherId: 3,
  classId: 1,
  title: "数学作业",
  description: "练习册第55页",
  dueDate: "2024-07-10T16:00:00.000+00:00",
  createdAt: "2024-07-09T00:53:37.000+00:00"
};
let addHomework = ref({});
function setHomework(){
  setHomeWorks(homeworkData).then(res=>{
    console.log('sethomeworks',res)
    addHomework.value = res.datas;
    console.log('add',addHomework.value);
    addNewHomework(addHomework.value); // 添加到待布置作业列表
  })
}
const addNewHomework = (newHomework) => {
  homeworks.value.push(newHomework);
};
</script>

<template>
  <h1 style="text-align: center">待布置作业</h1>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column prop="classId" label="班级"/>
    <el-table-column prop="title" label="科目"/>
    <el-table-column prop="description" label="内容"/>
    <el-table-column prop="createdAt" label="创建时间"/>
    <el-table-column prop="dueDate" label="截止时间"/>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Search..." />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleCommit(scope.$index, scope.row)">
          布置作业
        </el-button>
<!--        <el-button-->
<!--            size="small"-->

<!--        >  type="danger"-->
<!--          @click="handleDelete(scope.$index, scope.row)"-->
<!--          Delete-->
<!--        </el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="setHomework">获取未添加的作业，并且添加到待布置作业</el-button>
  <div>
<!--    <h1>{{addHomework.title}}{{addHomework.description}}</h1>-->
    <el-button style="display: none" @click="addNewHomework(addHomework)" size="small">添加到待布置作业</el-button>
  </div>




</template>

<style scoped>

</style>